<template>
    <div class="hot">
        <div class="roots">
            <h4><i></i>热门品牌</h4>
            <div class="hotbotton">
                <scroll-view scroll-x=true class="scroll-header">
                        <view class="item" v-for="(item,ind) in list" :key="ind">
                            <div>
                                <p class="p"><img :src="item.logo" alt=""></p>
                                <p class="p1"><span>{{item.shopName}}</span></p>
                                <p class="p2"><span>{{item.styleCooking}}</span></p>
                            </div>
                        </view>
                </scroll-view>
            </div>
        </div>
    </div>
</template>

<script>
import {getHotbrands} from '@/service'

	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
            
		},
		
        async mounted(){
            let res=await getHotbrands();
			if(res.errNo===0){
				this.list=res.data
			}
            console.log(res.data)
        },
		methods: {

		}
	}
</script>

<style scoped lang=scss>
   .hot{
		.roots{
			width: 95%;
			margin:0 auto;
            h4{
                font-weight: 900;
                height: 100rpx;
                line-height:100rpx;
            }
			.hotbotton{
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                .scroll-header{
                    white-space: nowrap;
                    height: 200rpx;
                    .item{
                        display: inline-block;/**一定要有这个属性 否则不能在一行显示 */
                        >div{
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            /* flex-shrink: 0; */
                            width: 190rpx;
                            .p{
                                width: 100rpx;
                                overflow: hidden;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                img{
                                    width: 130rpx;
                                    height: 110rpx;
                                }
                            }
                            .p1{
                                color:#444;
                                span{
                                    font-size:26rpx;
                                }
                            }
                            .p2{
                                color:#999;
                                span{
                                    font-size:24rpx;
                                }
                            }
                        }
                        
                    }
                }
            }
		}
	}
</style>
